import { Outlet, useLocation } from "react-router-dom";
import { Menu as AntdMenu, MenuProps } from 'antd';
import './menu.css';
import { router } from "../../index";

const items: MenuProps['items'] = [
    {
        key: '1',
        label: "会议室管理"
    },
    {
        key: '2',
        label: "预定管理"
    },
    {
        key: '3',
        label: "用户管理"
    },
    {
        key: '4',
        label: "统计"
    }
];

const handleMenuItemClick: MenuProps['onClick'] = (info) => {
    let path = '';
    switch (info.key) {
        case '1':
            path = '/meeting_room_manage';
            break;
        case '2':
            path = '/booking_manage';
            break;
        case '3':
            path = '/user_manage';
            break;
        case '4':
            path = '/statistics';
            break;
    }
    router.navigate(path);
}



export function Menu() { 
    //React 的钩子函数是用来在函数组件中添加状态管理、副作用处理和其他功能的特殊函数。
    //它们通过使用特定的命名约定（以 use 开头）来识别，并依赖于 React 的内部机制来管理和跟踪状态的变化。
    //React 的钩子函数（Hooks）必须在函数组件的顶层作用域内使用
    //钩子函数放在函数组件之外，React 将无法正确地管理它们的状态和更新.
    const location = useLocation();
    function getSelectedKeys() {
        if (location.pathname === '/user_manage') {
            return ['3']
        } else if (location.pathname === '/booking_manage') {
            return ['2']
        } else if (location.pathname === '/meeting_room_manage') {
            return ['1']
        } else if (location.pathname === '/statistics') {
            return ['4']
        } else {
            return ['1']
        }
    }

    return <div id="menu-container">
        <div className="menu-area">
            <AntdMenu
                defaultSelectedKeys={getSelectedKeys()}
                items={items}
                onClick={handleMenuItemClick}
            />
        </div>
        <div className="content-area">
            <Outlet></Outlet>
        </div>
    </div>
}
